<template>
    <div class="course_node_video">
        <VideoPlayer
                class="video-player vjs-custom-skin"
                ref="videoPlayerRef"
                :playsinline="true"
                :options="playerOptions"
                @ready="playerReadied"
                @pause="onPlayerPause($event)"
                @timeupdate="onPlayerTimeupdate($event)"
                customEventName="customstatechangedeventname"
                @play="onPlayerPlay"
                @ended="onPlayerEnded"
                @waiting="onPlayerWaiting"
                @playing="onPlayerPlaying"
                @loadeddata="onPlayerLoadeddata"
                @canplay="onPlayerCanplay"
                @canplaythrough="onPlayerCanplaythrough"
                @statechanged="playerStateChanged"
        >
        </VideoPlayer>
    </div>
</template>

<script setup>
    import {VideoPlayer} from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    // import 'vue-video-player/src/custom-theme.css'
    import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
    const emits = defineEmits([
        'handleCurrentTime',
        'onPlayerPause',
        'onPlayerPlay',
        'playerStateChanged',
        'onPlayerEnded',
        'onPlayerWaiting',
        'onPlayerPlaying',
        'onPlayerLoadeddata',
        'onPlayerCanplay',
        'onPlayerCanplaythrough'
    ])
    const videoPlayerRef = ref()
    const playerOptions = ref({
        controls: true, // 确保启用了控件
        playbackRates: [0, 0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN', // zh-CN  需要main.js全局引入才可以生效
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
            {
                type: 'video/mp4', // 类型
                src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4' // url地址https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4
            }
        ],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
            // 当前时间和持续时间的分隔符
            timeDivider: true,
            // 显示持续时间
            durationDisplay: true,
            // 是否显示剩余时间功能
            remainingTimeDisplay: false,
            // 是否显示全屏按钮
            fullscreenToggle: true,
            // 播放暂停按钮
            playToggle: true,
            // 音量控制
            volumeMenuButton: false,
            // 当前播放时间
            currentTimeDisplay: true,
            // 点播流时，播放进度条，seek控制
            progressControl: true,
            // 直播流时，显示LIVE
            liveDisplay: true,
            // 播放速率，当前只有html5模式下才支持设置播放速率
            playbackRateMenuButton: true
        }
    })

    const currentTime = ref(0)
    const playtimes = ref(7)
    // 视频播放
    const videoPlay = () => {
        videoPlayerRef.value.player.play()
    }
    // 视频暂停
    const videoPause = () => {
        videoPlayerRef.value.player.pause()
    }
    // 视频静音
    const videoMute = () => {
        videoPlayerRef.value.player.muted(true)
    }
    // 获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
    const onPlayerTimeupdate = (player) => {
        // emits('handleCurrentTime', player.cache_.currentTime)
    }
    // 设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用)
    const playerReadied = (player) => {
        // player.currentTime(currentTime.value)
    }
    // 暂停回调   将视频播放的时间保存  暂停回调(暂停时调用)(用户操作调用)
    const onPlayerPause = (player) => {
        // console.log('player pause currentTime!', player.cache_.currentTime)
        // emits('onPlayerPause', player.cache_.currentTime)
    }
    // 播放回调(播放时会调用)(用户操作调用)
    const onPlayerPlay = (player) => {
        emits('onPlayerPlay', player)
    }
    // 播放状态改变回调
    const playerStateChanged = (playerCurrentState) => {
        console.log('数据变化', playerCurrentState)
        emits('playerStateChanged', playerCurrentState)
    }
    // 视频播完回调 (结束)(视频播放完毕调用)
    const onPlayerEnded = (player) => {
        console.log('结束', player)
        emits('onPlayerEnded', player)
    }
    // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
    const onPlayerWaiting = (player) => {
        console.log('等待', player)
        emits('onPlayerWaiting', player)
    }
    // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
    const onPlayerPlaying = (player) => {
        console.log('播放中', player)
        emits('onPlayerPlaying', player)
    }
    // 当播放器在当前播放位置下载数据时触发
    const onPlayerLoadeddata = (player) => {
        console.log('预加载', player)
        emits('onPlayerLoadeddata', player)
    }
    // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
    const onPlayerCanplay = (player) => {
        console.log('是否播放', player)
        emits('onPlayerCanplay', player)
    }
    // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
    const onPlayerCanplaythrough = (player) => {
        console.log('能够从头到尾播放', player)
        emits('onPlayerCanplaythrough', player)
    }
    onMounted(()=>{
        console.log("VideoPlayer onMounted",VideoPlayer)
        // setTimeout(()=>{
        //     videoPlayerRef.value.player.play()
        // },3000)

    })
</script>

<style lang="scss" scoped>
    .course_node_video {
        /*width: 100%;*/
        /*height: auto;*/
        width: 300px;
        height: 180px;
        margin: 0 auto;
        text-align: center;
        object-fit: fill;
    }
    ::v-deep video {
        /*width: 100% !important;*/
        /*height: calc(100vh - 200px) !important;*/
        object-fit: fill;
    }
    /*::v-deep .vjs-big-play-button{*/
    /*    border:1px solid;*/
    /*    background-color: #bfa;*/
    /*}*/
</style>